<template>
    <div class="tab">
        <!-- 循环遍历tabData数据，向 icon 组件传值，给 icon 组件的插槽填充文字 -->
        <!-- v-for="(item,index) in tabData" 意思是 item 为数组中的元素，index 为索引，key 为数组中元素的唯一标识，这里为 id -->
        <!-- :index="index" 这种写法是向子组件传值 -->
        <tab-icon v-for="(item,index) in tabData" :index="index" :iconText="item.iconText" :path="item.path" :key="item.id">
            <!-- 下面是给 tab-icon 插槽 传递内容 -->
            {{ item.tabText }}
        </tab-icon>
    </div>
</template>

<script>
// 引入icon组件
import TabIcon from '@/components/TabBar/icon'
// 引入 tab 所用的数据
import tabData from '@/data/tab'
// 引入ref (本组件用到了ref函数，所以要先引入)
// 使用 ref 函数，返回一个响应式对象，目的是为了在模板中，通过 ref 绑定的元素，获取到元素本身，从而操作元素本身。
// ref 函数接收一个参数，参数可以是一个对象，也可以是一个基本数据类型
import {ref} from 'vue'

export default {
    // 注册组件
    components: {
        TabIcon
    },
// 下面是setup函数 用做数据的获取
    setup() {
        return {
            tabData:ref(tabData)
        }
    }
}
</script>

<style lang="less" scoped>
.tab {
    // 弹性布局
    display: flex;
    // 左右均分
    justify-content: space-around;
    // 垂直中间对齐
    align-items: center;
    // 定位模式：固定（相对于视口）
    position: fixed;
    // 底部：0
    bottom: 0;
    // 距左侧：0
    left: 0;
    // 层叠顺序：最上层
    z-index: 999;
    // 宽度：100%
    width: 100%;
    // 高度：0.44rem
    height: 0.44rem;
    // 背景颜色：白色
    background-color: #fff;
    // 上边框：0.01rem
    border-top: 0.01rem solid #ccc;
}    
</style>